<template>
  <div class="">
    <div class="mask" @click="close"></div>
    <div class="paymodal codemodal">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" class="close iconfont" @click="close">&#xe616;</a>
      </div>
      <div class="modal_body payrun h180" v-if="payStep === 2">
        <div class="icon iconfont c_green minIcon">&#xe69f;<span class="c_333">订单支付成功!</span></div>
        <!-- <div class="tip">支付成功</div> -->
        <div class="center mgt20">
          <a v-if="data.courseCategory == 1" :href="clientData.mainUrl + '/view/'+data.courseId" class="solid_btn">立即学习</a>
          <a v-else-if="data.courseCategory == 2" :href="clientData.mainUrl + '/live/detail/'+data.courseId" class="solid_btn">立即学习</a>
          <a v-else-if="data.courseCategory == 3" :href="clientData.mainUrl + '/live/bunch/'+data.courseId" class="solid_btn">立即学习</a>
          <a class="solid_btn" v-else href="javascript:" @click="reload">确定</a>
        </div>
        <div class="ewm_img" v-if="webInfo && webInfo.weixinXcx">
          <img :src="webInfo.weixinXcx" alt="">
          <p class="mgt10">微信扫码关注小程序</p>
          <p>学习更便捷</p>
        </div>
      </div>
      <div class="modal_body payrun" v-else-if="payStep === 3">
        <div class="icon iconfont c_red">&#xe68c;</div>
        <div class="tip">支付失败</div>
        <div class="center">
          <button class="solid_btn" @click="resetPay">重新支付</button>
        </div>
      </div>
      <div class="modal_body" v-else>
        <div class="pay_type">
          <input type="radio" id="payType2" name="payType" value="2" v-model="payType">
          <label for="payType2" class="pay pay_ali" @click="changePay(2)"></label>
          <input type="radio" id="payType1" name="payType" value="1" v-model="payType">
          <label for="payType1" class="pay pay_weixin" @click="changePay(1)"></label>
        </div>
        <div class="tip" v-if="payType === 2">支付宝支付 {{data.pricePaid}}元</div>
        <div class="tip" v-else>微信支付 {{data.pricePaid}}元</div>
        <div class="code">
          <canvas id="canvas"></canvas>
          <div class="create_tip" v-if="load">正在生成...</div>
        </div>
        <p class="tip2" v-if="payType === 2">请使用支付宝扫描<br> 二维码以完成订单</p>
        <p class="tip2" v-else>请使用微信扫描<br> 二维码以完成订单</p>
      </div>
    </div>
  </div>
</template>
<script>
import {continuePay, orderInfo} from '~/api/account/course.js'
import QRCode from 'qrcode'
export default {
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      payStep: 1,
      payType: 1,
      load: true
    }
  },
  methods: {
    reload () {
      window.location.reload();
    },
    close (event) {
      this.$emit('hidefun', event);
    },
    getOrder (pt) {
      this.load = true;
      console.log({
        orderNo: this.data.orderNo,
        payType: pt
      })
      continuePay({
        orderNo: this.data.orderNo,
        payType: pt
      }).then(res => {
        console.log(res)
        let result = res.data
        if (result.code === 200) {
          this.payType = result.data.payType;
          this.qrcode(result.data.payMessage);
          this.getOrderInfo(result.data.orderNo)
        } else {
          if (result.code >= 300 && result.code < 400) {
            this.$msgBox({
              content: '登录超时，请重新登陆',
              isShowCancelBtn: false
            }).then(() => {
              this.$store.dispatch('REDIRECT_LOGIN', result.code)
            }).catch(() => {
              this.$store.dispatch('REDIRECT_LOGIN', result.code)
            })
          } else {
            this.$msgBox({
              content: result.msg,
              isShowCancelBtn: false
            }).then(() => {
              this.$emit('hidefun', event);
            }).catch(() => {})
          }
        }
      }).catch(msg => {
        this.getOrder(this.data.payType);
      })
    },
    resetPay () {
      this.payStep = 1;
      this.getOrder(this.payType);
    },
    qrcode (url) {
      let that = this;
      QRCode.toCanvas(document.getElementById('canvas'), url, {
        width: 180,
        height: 180
      }, function (error) {
        if (error) console.error(error)
        that.load = false;
      })
    },
    changePay (int) {
      // console.log(int)
      this.getOrder(int);
    },
    getOrderInfo (no) {
      let that = this;
      orderInfo({orderNo: no}).then(res => {
        // console.log(res)
        let result = res.data
        if (result.data.orderStatus === 1) {
          setTimeout(function () {
            that.getOrderInfo(no);
          }, 1000);
        } else if (result.data.orderStatus === 2) {
          that.payStep = 2;
        } else {
          that.payStep = 3;
        }
      })
    }
  },
  mounted () {
    console.log(this.data)
    this.payType = parseInt(this.data.payType);
    this.getOrder(this.data.payType);
  }
}
</script>
<style lang="scss" scoped>
.h180 {
  max-height: 370px;
  min-height: 180px;
}
.paymodal{
  position: fixed;
  left: 50%;
  top: 10%;
  z-index: 999;
  width: 480px;
  margin-left: -240px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  .modal_head{
    line-height: 46px;
    background-color: #f9f9f9;
    text-align: right;
    padding: 0 20px;
    .close{
      font-size: 14px;
    }
  }
  .code{
    position: relative;
    .create_tip{
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      line-height: 30px;
      background-color: rgba(255,255,255,.7);
      text-align: center;
    }
  }
  .modal_foot{
    border-top: 1px solid #e7e7eb;
    padding: 20px;
    text-align: center;
  }
  .table{
    width: 100%;
  }
  th{
    line-height: 36px;
    background-color: #f8f8f8;
  }
  td{
    vertical-align: middle;
    padding: 20px;
  }
  .name{
    width: 140px;
    padding-left: 12px;
    font-size: 16px;
  }
  .img{
    display: inline-block;
    width: 120px;
    padding: 0;
  }
  .name{
    display: inline-block;
    vertical-align: top;
  }
  .tabs {
    height: 48px;
    .tab{
      float: left;
      line-height: 46px;
      text-align: center;
      font-size: 16px;
      width: 50%;
    }
    span{
      cursor: default;
      display: inline-block;
      line-height: 46px;
    }
    .on{
      color: #ee7e00;
      span{
        border-bottom: 2px solid #ee7e00;
      }
    }
  }
  .remark{
    padding: 20px;
    overflow: hidden;
    font-size: 14px;
    border-top: 1px solid #f1f1f1;
    input{
      text-indent: .5em;
      height: 22px;
      width: 350px;
      border: none;
    }
  }
  .pay_type{
    padding: 12px 20px;
    overflow: hidden;
    border-bottom: 1px solid #f1f1f1;
    input{
      display: none;
      &:checked + .pay{
        border-color: #ec7f00;
      }
    }
  }
  .pay{
    width: 218px;
    height: 50px;
    border: 1px solid #fff;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    &.pay_ali {
      background-image: url();
    }
    &.pay_weixin {
      background-image: url();
    }
  }
}
.codemodal{
  .tip{
    margin: 20px auto 0;
    text-align: center;
    font-size: 16px;
  }
  .code{
    width: 180px;
    height: 180px;
    border: 1px solid #ddd;
    margin: 20px auto;
  }
  .tip2{
    margin: 0 auto;
    width: 200px;
    padding: 13px 0 13px 70px;
    height: 60px;
    margin-bottom: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    background: url() no-repeat 20px center #445f85;
  }
  .tip_panel{
    margin-top: 20px;
    padding: 20px;
    line-height: 20px;
    border-top: 1px solid #f1f1f1;
  }
}
.payrun{
  .icon{
    font-size: 80px;
    width: 80px;
    margin: 30px auto 0;
    text-align: center;
    &.minIcon {
      font-size: 26px;
      width: 160px;
      span {
        position: relative;
        top: -5px;
        font-size: 14px;
        padding-left: 6px;
      }
    }
  }
  .tip{
    font-size: 16px;
    text-align: center;
    padding-bottom: 20px;
  }
  .c_green{
    color: #05d005;
  }
  .ewm_img {
    width: 130px;
    display: block;
    margin: 20px auto 0;
    text-align: center;
    img {
      width: 130px;
      height: 130px;
    }
    p {
      line-height: 20px;
    }
  }
}
</style>
